<style src='../../css/common.css' ></style>
<template>
<div class="batconfirm">
    <!-- 头部导航 -->
    <!-- <div class="status-bar" v-if="ifStatusBarExist"></div> -->
    <wxc-minibar title="投注确定">
        <div class="header-font-title" slot="right" @click="payMent('chip')">
            <text class="header-font-pr">发起合买</text>
        </div>
    </wxc-minibar>
    <!-- 头部导航end -->
    <div class="middlecontent" :style="ifStatusBarExistForContent">
        <!-- 选号操作按钮 -->
        <div class="option">
            <div class="option_fl" @click="goSelectMark()">
                <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete.png" class="option-icon-btn" style="margin-right:16px;"></image>
                <text class="option-text-btn">继续选号</text>
            </div>
            <div class="option_fr" @click="randowfive()">
                <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete.png" class="option-icon-btn" style="margin-right:16px;"></image>
                <text class="option-text-btn">机选5注</text>
            </div>
        </div>
        <!-- 选号操作按钮 -->
        <div class="batlist">
            <div class="batlist-line"></div>
            <div class="scroller-box">
                <scroller class="scroller" :style="contentStyle">
                    <div class="batlist_item" v-for="(item, index) in markList" :key="`item${index}`">
                        <!-- 每列删除球的操作按钮-->
                        <div class="batlist_item_icon">
                            <image class="batlist_item_icon_delete" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete_1.png" @click="deleteMarkList(index)"></image>
                        </div>
                        <!-- 每列删除球的操作按钮end-->
                        <!-- 没列球数据 -->
                        <div class="batlist_item_number">
                            <div class="numberlist">
                                <!-- 红球 -->
                                <div class="parint" v-for="(redItem, redBallIndex) in item.redBall" :key="`redBall${redBallIndex}`">
                                    <div class="numberdetail red">
                                        <text class="white-color">{{ redItem  > 9 ? redItem : '0' + redItem }}</text>
                                    </div>
                                    <image v-for="(danRedItem, danRedBallIndex) in item.danRedBall" :key="`redBall${danRedBallIndex}`" v-if=" redItem === danRedItem " class="dannumber" style="width:20px;height:20px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/dan.png"></image>
                                    <!-- 红球-是否胆码 -->
                                    <!-- 红球-是否胆码end -->
                                </div>
                                <!-- 红球end -->
                                <!-- 蓝球 -->
                                <div class="parint" v-for="(blueItem, blueBallIndex) in item.blueBall" :key="`blueBall${blueBallIndex}`">
                                    <div class="numberdetail bluess">
                                        <text class="white-color">{{ blueItem  > 9 ? blueItem : '0' + blueItem }}</text>
                                    </div>
                                    <!-- 蓝球-是否胆码 -->
                                    <image v-for="(danBlueItem, danBlueBallIndex) in item.danBlueBall" :key="`blueBall${danBlueBallIndex}`" v-if=" blueItem === danBlueItem " class="dannumber" style="width:20px;height:20px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/dan.png"></image>
                                    <!-- 蓝球-是否胆码end -->
                                </div>
                                <!-- 蓝球end -->
                            </div>
                            <!-- 返回是否是自选还是机选 -->
                            <div class="batlist_item_desc" v-if=" item.type == 'multiple'">
                                <text style="margin-right:36px;font-size:24px; color:#333;">{{numberTypeSwitch(item.numberType)}}</text>
                                <text style="margin-right:24px;font-size:24px; color:#333;">1注</text>
                                <text style="margin-right:24px;font-size:24px; color:#333;">2元</text>
                            </div>
                            <div class="batlist_item_desc" v-else>
                                <text style="margin-right:36px;font-size:24px; color:#333;">{{numberTypeSwitch(item.numberType)}}</text>
                                <text style="margin-right:24px;font-size:24px; color:#333;">{{ item.number }}注</text>
                                <text style="margin-right:24px;font-size:24px; color:#333;">{{ item.money }}元</text>
                            </div>
                            <!-- 返回是否是自选还是机选end -->
                        </div>
                        <!-- 没列球数据end -->
                    </div>
                </scroller>
                <!-- 齿轮图片 -->
                <div class="batlist-gear">
                    <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/gear-icon.png" style="width:686px;height:24px;"></image>
                </div>
            </div>

        </div>
        <div class="protocol">
            <!-- 协议是否同意 -->
            <div class="protocol_fl" @click="afterVoting('checked')">
                <div class="protocol_fl_check" v-if="!checked" style="width:40px;height:40px;border-radius:20px;background-color:white;"></div>
                <image class="protocol_fl_checkd" v-if="checked" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png"></image>
            </div>
            <div class="protocol_fl" style="margin-left:16px">
                <text style="font-size: 24px;color: #999999;">我已年满18周岁，已阅读并同意</text><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #151515;" @click="showPop">《购彩代购协议》</text>
            </div>
            <!-- 协议是否同意end -->
        </div>
        <div class="stepoption">
            <!-- 投的期数 -->
            <div class="stepoption_fl">
                <text class='gray-font'>投</text>
                <div class="stepoption-ct">
                    <div class="stepoption-minus" style="border-right-width:0px;" @click="calcalate('left', 'periods')">
                        <text style="font-size:50px;">-</text>
                    </div>
                    <text class="stepoption-input" @change="changeFn('periods')">{{periods}}</text>
                    <!-- <input class="stepoption-input" type="number" v-model="periods" max="100" min="1" disabled  @change="changeFn('periods')"> -->
                    <div class="stepoption-minus" style="border-left-width:0px;" @click="calcalate('rigt', 'periods')">
                        <text style="font-size:50px;">+</text>
                    </div>
                </div>
                <text class='gray-font'>期</text>
            </div>
            <!-- 投的期数end -->
            <!-- 投的倍数 -->
            <div class="stepoption_rg">
                <text class='gray-font'>投</text>
                <div class="stepoption-ct">
                    <div class="stepoption-minus" style="border-right-width:0px;" @click="calcalate('left', 'multiple')">
                        <text style="font-size:50px;">-</text>
                    </div>
                    <text class="stepoption-input" disabled @change="changeFn('multiple')">{{multiple}}</text>
                    <!-- <input class="stepoption-input" type="text" v-model="multiple" max="100" min="1" disabled @change="changeFn('multiple')" > -->
                    <div class="stepoption-minus" style="border-left-width:0px;" @click="calcalate('right', 'multiple')">
                        <text style="font-size:50px;">+</text>
                    </div>
                </div>
                <text class='gray-font'>倍</text>
            </div>
            <!-- 投的倍数end-->
        </div>
    </div>

    <div class="fixedbottom">
        <div class="fixedbottom_fl" @click="afterVoting('checked1')" v-if="this.lottoType === 'super-lotto'">
            <div class="" v-if="!checked1" style="width:40px;height:40px;background-color:white;border-radius:20px;border-width:1px;border-color:rgba(0,0,0,0.1);"></div>
            <image class="" v-if="checked1" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png"></image>
            <text style="font-size:24px; color:#333; margin-left:8px;">追加投注</text>
        </div>
        <!-- 投注总期数倍数金额 -->
        <div class="fixedbottom_rg">
            <div style="margin-right:32px; flex:1; display:flex; align-items: flex-end;">
                <div style="display:flex;justify-content:flex-end;align-items:flex-end;">
                    <text style="font-family: PingFangSC-Medium;font-size:24px; color: #E70D0D;">{{totalPram.money}}元</text>
                </div>
                <div style="display:flex;flex-direction: row;align-items:center;">
                    <text style="font-size: 20px;color:#B2B2B2;">{{totalPram.number}}注{{multiple}}倍{{periods}}期</text>
                </div>
            </div>
            <div class="buttons">
                <wxc-button text="付款" :disabled="btnDisabled" :btnStyle="btnStyle" @wxcButtonClicked="payMent('pay')"></wxc-button>
                <!-- <text style="font-size:32px; color:#fff;">付款</text> -->
            </div>
        </div>
        <!-- 投注总期数倍数金额end-->
    </div>
    <loading-big v-if="loadingshow"></loading-big>
    <!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
    </wxc-loadingsp> -->
    	<wxc-mask
			 height="800"
              width="702"
              border-radius="10"
              duration="200"
              mask-bg-color="#FFFFFF"
              :has-overlay="true"
              :show-close="true"
              :show="show"
              @wxcMaskSetHidden="wxcMaskSetHidden">
				<div class="content">
						<div class="demo-title" >
							<text class="title" style="text-align:center;  padding-top:20px;font-size:32px;font-weight:bold">用户协议</text>
						</div>
							<scroller class="scroller-xieyi">
								<div class="goucai-wrap">
									
											<div class="goucai-item">
													<text class="goucai-title">一、【服务协议的确认与接纳】</text>
													<text class="goucai-text">海豚彩票提供的各项基于互联网以及通信网的相关服务（以下称“服务”）的所有权及经营运作权，归杭州慧彩网络科技有限公司所有。海豚彩票提供的服务将完全按照其发布的章程、服务条款和操作规则严格执行。为获得相关服务，服务使用人（以下称"用户"）应当同意本协议的全部条款，用户在注册过程中勾选“同意”《海豚彩票用户购彩协议》即表示用户完全接受本协议项下的全部条款。在任何情况下，用户使用海豚彩票的任何服务，即视为用户完全同意并接受本服务协议，受到本服务协议的指引和约束。 </text> 
													<text class="goucai-text">本平台所提供的投注服务是一种代理购买的服务项目，代理购买项目均为与彩票发行机构合作的合法彩票品种，并非网上直接投注交易。您成功在本平台提交投注订单后并不代表彩票已经投注成功，系统投注出票、兑奖处理，处理周期根据不同彩票品种的操作难易性而定，订单状态中将明示您的订单处理实时状态。</text>
											</div>
												<div class="goucai-item">
													<text class="goucai-title">二、【服务协议的修订与新增】   </text>
													<text class="goucai-text">海豚彩票有权在必要时修改服务条款，服务条款一旦发生变动，将会在重要页面上提示修改内容。如果用户不同意所改动的内容，用户可以主动取消获得的相关服务。如果用户继续享用服务，则视为接受服务条款的变动。</text>
													<text class="goucai-text">海豚彩票将不时提供其他服务，而这些其他服务可能是受不同的服务条款和条件约束的，若新服务未发布服务条款和条件时，则适用于本条款，其他未尽事宜，杭州慧彩网络科技有限公司拥有最终解释权利。</text>
											</div>
												<div class="goucai-item">
														<text class="goucai-title"> 三、【相关定义】</text>
														<text class="goucai-text">1、用户：指在海豚彩票注册登记，并得到海豚彩票在线认可，有资格享受海豚彩票服务的注册会员。</text>
														<text class="goucai-text"> 2、代购：指用户以注册的用户名单独委托海豚彩票代其购买某种彩种的彩票，用户对所代购的彩票拥有完整的奖金获得权利。</text>
														<text class="goucai-text">3、合买：指不同的用户通过各自购彩账户合作委托海豚彩票代购某种彩种的彩票，参与用户按其认购金额占合买总购彩金额的比例，享有相应份额所代购彩票的奖金的权利。</text>
														<text class="goucai-text"> 4、购彩账户：指用户按海豚彩票的要求，在海豚彩票网站上设立的账户。购彩账户由现金账户和红包账户两部分组成，现金账户用于存放用户通过海豚彩票各充值渠道充值现金和购彩中奖的奖金；红包账户用于存放海豚彩票通过各种优惠活动赠送给用户的彩金，彩金只能用于在海豚彩票各平台代购彩票，不能提款，海豚彩票有权对所赠送彩金的使用期限、使用范围、使用频率、使用金额限度做出事先约定，用户使用彩金应遵守该约定。</text>
														<text class="goucai-text"> 5、预付款：指用户存放在购彩账户中的款项，专门用于委托海豚彩票购买用户指定的彩票，以及海豚彩票提供的其他服务和产品。</text>
														<text class="goucai-text"> 6、用户资料：指用户在注册时提供的个人信息，包括但不限于：用户名、昵称、注册账户密码、银行账号、用户真实姓名、身份证号码等。</text>
														<text class="goucai-text"> 7、出票：指用户的代购和合买方案经由海豚彩票订单出票系统，通过终端机或国家彩票机构的无纸化接口成功记录到国家彩票机构的数据库中。出票是用户彩票购买成功的唯一标志。</text>
												</div>
													<div class="goucai-item">
															<text class="goucai-title">四、【本协议服务范围】</text>
															<text class="goucai-text">本协议服务范围包括：提供代购和合买平台；提供彩票相关资讯；提供彩票信息交互平台；提供在线预付支付结算服务。</text>
															<text class="goucai-text">本协议服务范围不包括向用户提供电脑终端及其附属设备、网络和通信等资源。</text>
															<text class="goucai-text">海豚彩票运用自己的操作系统通过互联网络及通信网络为用户提供服务。用户必须：</text>
															<text class="goucai-text">（1） 自行配备上网的相关所需设备；</text>
															<text class="goucai-text">（2）自行负担个人上网所支付的与此服务有关的通讯费用、 网络费用；</text>
															<text class="goucai-text">（3）提供详尽、准确、真实的个人资料；</text>
															<text class="goucai-text">（4）不断更新注册资料，符合及时、详尽、准确的要求。所有原始键入的资料将引用为注册资料。</text>
													</div>
														<div class="goucai-item">
																<text class="goucai-title">五、【用户资料隐私和安全】</text>
																<text class="goucai-text">海豚彩票承诺对用户注册资料隐私信息绝对保密。未经用户授权或同意，不得擅自将用户信息用于处理用户委托代购行为以外的其他活动，涉及相关法律事件除外。</text>
																<text class="goucai-text">海豚彩票对用户注册信息提供最大限度的安全保障。同时，用户务必对其用户密码、个人账号等信息自行保密，免被盗用或篡改。另外每个用户都要对其账户中的所有操作活动和事件负全责。用户若发现任何非法使用用户本人注册账号或安全漏洞的情况，请立即与海豚彩票联系。</text>
															<text class="goucai-text"> 为保障用户的合法权益，避免在中奖提款时因用户注册资料与真实情况不符而发生纠纷，请用户注册时务必真实、全面、准确的填写个人资料。对因用户自身原因而造成的不能兑奖情况，海豚彩票概不负责。</text>
															<text class="goucai-text">如用户提供的资料非真实准确合法有效，海豚彩票保留结束用户使用海豚彩票各项服务的权利。</text>
															<text class="goucai-text">用户在享用海豚彩票各项服务的同时，即表示同意接受海豚彩票提供的各类信息服务。</text>
														</div>	
											<div class="goucai-item">
													<text class="goucai-title">六、【用户的权利】</text>
													<text class="goucai-text">1、账户管理权：用户有权随时查询用户资料，并可对除用户名、用户真实姓名、身份证号码及相关银行账号以外的信息进行修改。</text>
														<text class="goucai-text">2、免费使用权：用户有权免费使用海豚彩票的彩票投注委托系统以及免费使用网站的网上分析系统，进行彩票分析、或查询半年内的历史投注情况和账户资金流水。</text>
															<text class="goucai-text">3、彩票查询权：用户通过海豚彩票委托彩票代购、合买成功后，有权免费在海豚彩票查询所代购、合买彩票的状态。</text>
																<text class="goucai-text">4、奖金获得权：用户通过海豚彩票委托代购、合买彩票成功的，若彩票中奖，用户有权获得相应奖金。</text>
																<text class="goucai-text">5、合买发起人盈利佣金获得权：在合买方式发起中，若合买方案中奖，税后存在可分配奖金，合买方案发起人可设置获得一定比例的税后盈利奖金作为方案制作佣金。剩余的奖金在合买参与人之间分配。</text>
																	<text class="goucai-text">6、合买参与人奖金获得权：在合买方式中，若方案税后存在可分配盈利，在支付方案发起人盈利佣金后，剩余的奖金在合买人之间分配。</text>
																	<text class="goucai-text">7、预付款账户核查权：用户可以随时对预付款账户进行资金余额核查。</text>
																		<text class="goucai-text">8、申请提款权：用户在任何时间都可对自己账户的现金账户余额申请提款，海豚彩票在核对用户资金来源正常的情况下（正常资金来源是指用户通过海豚彩票提供的渠道进行账户充值本金、购彩中奖等方式在海豚彩票用户账户中产生的相应数额的资金），在收到提款请求2个工作日内将用户现金账户余额中需提取的款项转账到用户注册的银行或用户支付宝账户上。用户提款转账所产生的手续费用由用户承担。若海豚彩票对申请提款权有特殊约定的，遵照特殊约定执行。</text>
																		<text class="goucai-text">9、为了防止少数用户利用本站进行套现和洗钱行为，充值账户余额进行提款将实行原路退回的处理方式，自提出申请之日起1至3个工作日内完成（不含周末及节假日），海豚彩票有权代第三方收取1%不等的交易手续费。</text>
																		<text class="goucai-text">10、注销权：用户可向海豚彩票申请取消使用其注册的用户名，并注销其预付款账户。海豚彩票在核对用户资料后，按用户要求将预付款余额返还给用户，并在15个工作日内注销用户名和账户。注销该账户后，用户将不得再次使用其绑定的真实身份信息与认证手机号码进行新账户的二次绑定与认证。</text>
																		
											</div>
												<div class="goucai-item">
													<text class="goucai-title">七、【用户的义务】</text>
													<text class="goucai-text">1、全面遵守本协议的义务：在注册登记成为海豚彩票用户之前，须认真阅读、理解本协议各条款，一经注册成功即视为同意本协议全部条款，用户有义务全面遵守本协议。</text>
														<text class="goucai-text">2、如实提供用户资料义务：为保障用户的合法权益，避免在中奖时出现用户注册资料与真实情况不符导致不能兑奖等情况，用户必须真实、全面、准确的提供用户资料。因用户资料不真实、不全面、不准确造成不能兑奖、不能提款、不能注销等情况，由用户承担全部责任。</text>
														<text class="goucai-text">3、对应注册义务：一个用户、一个身份证号、一个手机号只能有效注册一次，且三者之间必须一一对应。严禁任何形式的重复注册及多次恶意注册，因此而造成的一切后果，由用户自行承担。同时，为保证用户操作预付款账户的安全性，用户应以一个银行卡账号对应一个用户真实姓名，因银行卡账号与用户真实姓名不能互相对应而产生的不利后果，由用户自行承担。</text>
															<text class="goucai-text">4、保护账户资料义务：用户账户资料包括用户密码、个人账号以及用户账号操作所需的资料。用户务必对其账户资料自行保密，以免账号资料被盗用或篡改。因用户自身原因导致账户资料被泄漏、盗用或篡改而给用户造成的任何损失及法律责任，均由用户自行承担。</text>
															<text class="goucai-text">5、预付款项义务：为避免因资金不能及时到账导致延误购买彩票的情况，用户均应设立预付款账户，用户可在账户中预先存入款项。</text>
																<text class="goucai-text">6、承担银行费用的义务：用户在申请提款或因合同终止返还购彩款项的情况下，账户款项从购彩账户转账至用户银行卡或支付宝账号的手续费用由用户自行承担。</text>
																<text class="goucai-text">7、缴纳个人所得税的义务。单注彩票中奖金额高于人民币1万元（壹万元）时，用户需依法缴纳个人所得税，由彩票发行中心依法代扣代缴。</text>
																	<text class="goucai-text">8. 遵守网络安全管理的义务：用户不得利用海豚彩票制作、复制和传播下列信息：</text>
																		<text class="goucai-text">（1）煽动抗拒、破坏宪法和法律、行政法规实施的；</text>
																		<text class="goucai-text">（2）煽动颠覆国家政权，推翻社会主义制度的；</text>
																		<text class="goucai-text">（3）煽动分裂国家、破坏国家统一的；</text>
																			<text class="goucai-text">（4）煽动民族仇恨、民族歧视，破坏民族团结的；</text>
																			<text class="goucai-text">（5）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；</text>
																				<text class="goucai-text">（6）宣扬迷信、淫秽、色情、赌博、暴力、凶杀、恐怖、教唆犯罪的；</text>
																				<text class="goucai-text">（7）公然侮辱他人或者捏造事实诽谤他人的，或者进行其他恶意攻击的；</text>
																				<text class="goucai-text">（8）损害国家机关信誉的；</text>
																				<text class="goucai-text">（9）其他违反宪法、法律、行政法规、行政规章、地方性法规的行为；</text>
																				<text class="goucai-text">（10）进行商业广告行为。</text>
																					<text class="goucai-text">若用户的行为违反以上承诺，海豚彩票将做出独立判断，并立即取消用户服务账号。用户需对自己在网上的行为承担法律责任。用户若在海豚彩票上散布和传播反动、色情或其他违反国家法律的信息，海豚彩票的系统记录将作为用户违反法律的证据，要求用户承担法律责任。</text>
													</div>
																<div class="goucai-item">
																			<text class="goucai-title">八、【服务的信息储存及担保】</text>
																			<text class="goucai-text">海豚彩票将在为用户提供服务的过程中，竭尽可能地维护和完善海豚彩票提供的各种服务。用户在使用海豚彩票网络过程中自行承担风险，海豚彩票不担保服务一定能满足用户的要求，也不担保服务不会中断。同时，海豚彩票不对用户所发布信息的删除或储存失败负责。</text>
																</div>
																	<div class="goucai-item">
																			<text class="goucai-title">九、【免责条款】</text>
																				<text class="goucai-text">发生下列情况时，海豚彩票不予承担任何法律责任：</text>
																				<text class="goucai-text">1、用户资料泄露：因用户将密码告知他人或与他人共享注册账户，或因用户的疏忽大意，或者因用户操作不当，导致用户个人资料泄露，并由此产生的纠纷。因用户个人原因，导致其个人用户资料未经授权被使用和修改，用户密码、个人账号或注册信息被篡改、盗用而产生的一切后果。</text>
																					<text class="goucai-text">2、不可抗力及不可预见的情势发生：不可抗力和不可预见情势包括：自然灾害、政府行为、罢工、战争等；黑客攻击、计算机病毒侵入或发作、政府管制、彩票发行和销售机构的原因、彩票出票机或服务的故障、网络故障、国家政策变化、法律法规之变化等。因不可抗力和不可预见情势造成：暂时性关闭，用户资料或代购、合买委托指令泄露、丢失、被盗用、被篡改，委托代购、合买失败，海豚彩票未能收到委托指令等，以及由此产生的纠纷。因不可抗力和不可预见的情势造成本协议不能履行的。</text>
																					<text class="goucai-text">3、用户原因或第三方原因造成损失：由于用户自身原因、或违反法律法规，以及第三方的原因，造成用户无法使用彩票服务或产生其他损失的。</text>
																						<text class="goucai-text">4、用户代购、合买的彩票而产生的损失：用户根据本协议进行代购、合买委托投注而发生的直接、间接、偶然、特殊及继起的损害。</text>
																						<text class="goucai-text">5、用户使用链接或下载资料产生的损害：由于使用与海豚彩票链接的其它网站，或者使用通过海豚彩票下载或取得的资料，造成用户资料泄露、用户电脑系统损坏等情况及由此而导致的所有争议和后果。</text>
																	</div>
																	<div class="goucai-item">
																			<text class="goucai-title">十、【海豚彩票的权利】</text>
																				<text class="goucai-text">1、管理用户账户的权利：如果用户提供的资料包含有违反第七条第3款多次恶意注册的信息或违反第七条第8款网络安全管理的信息，海豚彩票保留注销其用户账户或者限制其使用全部或部分服务内容的权利。一经发现用户利用海豚彩票制作、复制和传播的信息明显属于违反第七条第8款所列信息之一的，海豚彩票将立即采取屏蔽信息、发出警告、直至关闭用户账户等措施。海豚彩票将保存有关记录，并向国家有关机关报告，用户的系统记录将作为用户违反法律法规的证据。</text>
																					<text class="goucai-text">2、修改本协议条款的权利：海豚彩票有权在必要时修改协议条款，协议条款一旦发生变动，将会在海豚彩票相关页面上提示或公告修改内容。如果不同意所改动的内容，用户可以主动取消海豚彩票的服务或注销用户身份。如果用户继续享用服务，则视为接受服务条款的变动。海豚彩票保留随时修改或中断服务而不需通知用户的权利。主要包括以下情况：</text>
																						<text class="goucai-text">（1）增加或减少彩票品种：海豚彩票代购和合买的彩票品种以当期可以实现代购的品种为准，长期或临时增加或减少彩票品种均不需事先告知用户。</text>
																							<text class="goucai-text">（2）调整彩票委托投注截止时间的权利。为预留出票时间，海豚彩票代购和合买服务截止时间比官方彩票销售截止时间略有提前，根据不同彩种提前的截止时间各有不同，海豚彩票有权根据彩票种类和当期委托投注情况调整彩票委托投注截止时间，而不需事先告知用户。</text>
																								<text class="goucai-text">3、代购彩票的权利和义务：在用户向海豚彩票提出代购请求后，海豚彩票有权从其购彩账户提取请求代购所需的款项金额，代为向彩票发行和销售机构申购用户指定的彩票。</text>
																								<text class="goucai-text">4、代为兑奖、领取奖金、分配奖金的权利和义务：在彩票中奖情况下，由海豚彩票负责代理兑奖、领取奖金事宜，并在官方开奖后的3个工作日内把税后奖金按比例进行分配，直接汇入到中奖用户的购彩账户。</text>
																								<text class="goucai-text">5、制止恶意提款或转账的权利：一旦发现恶意提现或转账行为，海豚彩票有权制止并将款项退回原账户。因此而发生的一切手续费用由用户承担。</text>
																								<text class="goucai-text">6、制止未满18周岁的未成年人代购彩票的权利：未成年人提供虚假用户资料冒充成年人代购彩票的，一经发现，该用户账户将被注销，其在海豚彩票进行的一切彩票委托购买行为将自始无效，由此给海豚彩票及其本人造成的损失以及不能领奖的后果均由该未成年人及其法定监护人承担。</text>
																								<text class="goucai-text">7、如海豚彩票对用户资金来源的合法性、对委托人是否年满18周岁等情况出现质疑，海豚彩票有权立即拒绝接受用户的代购和合买委托，且有权在接受该用户委托后、完成出票前随时终止执行用户的委托指令，恢复原状。</text>
																								<text class="goucai-text">8、制止公款购彩的权利：海豚彩票有权拒绝非个人资金通过海豚彩票购买彩票，一旦发现有款项自非个人账户资金转入用户预付款账户，海豚彩票有权采取强行将款项退回原账户、终止协议、注销用户账户等措施。海豚彩票同时将向有关管理机关报告。</text>
																								<text class="goucai-text">9、监督用户规范使用用户名昵称的权利：当用户所使用用户名昵称涉嫌：（1）以党和国家领导人或其他社会名人的真实姓名、字、号、艺名、笔名、昵称注册码 （2）以国家组织机构或其他组织机构的名称注册；（3）以与其他网友相同、相仿的名字或昵称注册；（4）以网站合买区、论坛名人相仿的名字注册；（5）以带广告性质、不文明、不健康的ID和昵称注册；（6）以对其他用户进行人身攻击、谩骂、诋毁称呼注册；（7）以易产生歧义、引起他人误解或带有各种奇形怪状符号的ID和昵称注册；（8）其他海豚彩票认为不适宜的用户名注册，海豚彩票有权劝告或阻止或禁止用户使用上述用户名进行注册。</text>
																									<text class="goucai-text">10、合理使用用户资料的权利：为了满足彩票机构的监管要求，为了用户顺利使用其选择的第三方服务，海豚彩票可向彩票机构或第三方服务商提供用户资料。海豚彩票用户同意放弃在此情况下向海豚彩票追究任何法律责任的权利。</text>
																									<text class="goucai-text">11、使用用户的中奖信息的权利：海豚彩票有权使用用户的用户名和中奖信息进行宣传活动。</text>
																									
																			</div>
																				<div class="goucai-item">
																			<text class="goucai-title">十一、【海豚彩票的义务】</text>
																			<text class="goucai-text">1、用户账户资料保护义务：海豚彩票对用户账户资料提供最大限度的安全保护。当海豚彩票用户涉嫌盗用他人第三方支付渠道（如：银联、微信、支付宝等）账户资金，或涉嫌其第三方支付渠道账户被盗用的，海豚彩票与用户应配合国家相关机关进行调查处理，海豚彩票将按照国家法律法规、司法机关或政府机关的要求提供用户相关资料。海豚彩票用户同意放弃在此情况下向海豚彩票追究任何法律责任的权利。</text>
																				<text class="goucai-text">2、公布中奖情况的义务：在官方彩票发行和销售机构发布中奖结果后七个工作日内，海豚彩票在网站中公布中奖号码及奖金分配情况，并以官方彩票发行机构和销售机构公布的中奖情况为准。</text>
																				<text class="goucai-text">3、提供购彩账户明细的义务：在网站上向用户提供购彩账户明细，方便用户对账。</text>
																					<text class="goucai-text">4、购彩余额提款义务：用户在任何时间都可对自己购彩账户中的现金账户余额申请提款，海豚彩票在核对用户资金来源正常的情况下，在收到提款请求2个工作日内将用户现金账户余额中需提取的款项转账到用户注册的银行或支付宝账户上。因用户提款转账所产生的手续费用由用户承担。凡海豚彩票对申请提款权有特殊约定的，遵照特殊约定执行。</text>
																					<text class="goucai-text">5、以预付款代购彩票的义务：代为兑奖、领取奖金、分配奖金的义务。</text>
																					
																			</div>
																				<div class="goucai-item">
																						<text class="goucai-title">十二、【协议成立、变更和终止】</text>
																						<text class="goucai-text">1、因网络故障、超过指定代购时间、购彩账户金额不足等原因，未能完成代购出票的，视为本次代购或合买委托未成立。海豚彩票对用户进行通知确认后（包括但不限于电话、短信、站内信、邮件等方式），返还预付资金至用户购彩账户上。</text>
																							<text class="goucai-text">2、海豚彩票有权对本协议条款进行合理变更而无需事先通知用户。</text>
																								<text class="goucai-text">3、任何一方未能履行本协议规定的任何义务，且在收到另一方发出更正通知15日内未能改正错误的，均被视为自动放弃本协议，协议同时终止。</text>
																								<text class="goucai-text">4、一经发现公款购彩嫌疑、未成年人购彩嫌疑等本协议禁止的情况，海豚彩票有权立即终止协议。</text>
																						
																				</div>
																					<div class="goucai-item">
																						<text class="goucai-title">十三、【违约责任】</text>
																						<text class="goucai-text">1、任何一方未能履行本协议规定的任何义务，且在收到另一方发出更正通知15日内未能改正错误的，均被视为自动放弃本协议，协议同时终止。另一方将有权就因对方放弃协议而造成的经济损失进行追偿。</text>
																						<text class="goucai-text">2、因任何一方出现违反法律的行为或本协议约定的违约行为，都应由责任方自行负责并补偿由此给对方造成的损失。</text>
																						
																						</div>
																						<div class="goucai-item">
																						<text class="goucai-title">十四、【服务内容所有权】</text>
																						<text class="goucai-text">海豚彩票的服务内容包括：文字、软件、声音、图片、录像、图表；广告中的全部内容；短信或邮件的全部内容；海豚彩票为用户提供的其他信息。所有这些内容受版权、商标、标签和其它财产所有权法律的保护。用户必须在海豚彩票的授权下才能使用上述内容，而不能擅自复制、再造上述内容、或创造与上述内容有关的派生产品。海豚彩票所有的文章版权归原文作者和海豚彩票共同所有，任何人需要转载海豚彩票的文章，必须征得原文作者或海豚彩票授权。</text>
																						
																						</div>
																							<div class="goucai-item">
																						<text class="goucai-title">十五、【法律】</text>
																						<text class="goucai-text">本服务条款受中国现行法律、法规以及此后颁布和实施的法律、法规的约束和保护，用户和海豚彩票一致同意服从其管辖。如发生海豚彩票服务条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，而其它条款则依旧保持对用户产生法律效力和影响。 用户及海豚彩票对对方的任何争议和质疑，均需及时告知对方，并尽可能友好协商解决。如协商不成，任何一方可提请杭州仲裁委员会申请仲裁，仲裁结果对双方均具有约束力。</text>
																						</div>
																							<div class="goucai-item item-bot">
																						<text class="goucai-title">十六、【未尽事宜】</text>
																						<text class="goucai-text">本服务条款的未尽事宜，海豚彩票在不违背有关法律、法规，不违反公共道德准则的情况下，由海豚彩票作出最终解释、补充，或另行约定附则。</text>
																							<text class="goucai-text">本协议最终解释权属于杭州慧彩网络科技有限公司所有。</text>
																						</div>
											</div>
									</scroller>
					</div>
		</wxc-mask>
</div>
<!-- </div> -->
</template>

<script>
import {
    WxcButton,
    WxcStepper,
    Utils,
    WxcDialog,
    WxcMask
} from "weex-ui";
import {
    debug
} from "util";
const storage = weex.requireModule("storage");
const modal = weex.requireModule("modal");
var sxglobalEvent = weex.requireModule("globalEvent");
import WxcLoadingsp from "../../components/modules/loading";
import {
    serialize,
    getBaseUrl,
    jsonAnalysis
} from "@/utils/index.js";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
const navigator = weex.requireModule("navigator");
import {
    postResponsesToken
} from "@/api.js";
import {
    recentBuyGroup
} from "@/js/global/index_data.js"
import loadingBig from "@/components/modules/loading-big";

export default {
    components: {
        WxcLoadingsp,
        WxcMinibar,
        WxcButton,
        loadingBig,
        WxcMask
    },
    data() {
        return {
            show: false,
            btnStyle: {
                backgroundColor: "#e70d0d",
                width: "158px",
                height: "100px",
                borderRadius: "0px"
            },
            lotteryLimit:[],
            contentStyle: {},
            issueId: "",
            issue: "",
            loadingshow: false,
            markList: [],
            reqMarklist: [],
            periods: 1,
            multiple: 1,
            checked1: false,
            checked: true,
            from: "",
            lottoType: "",
            lottos: {
                superlotto: {
                    forward: [1, 35, 5],
                    backward: [1, 12, 2]
                },
                unionlotto: {
                    forward: [1, 33, 6],
                    backward: [1, 16, 1]
                }
            }
        };
    },
    watch: {
        periods() {
            this.periods = this.astrictNumber("periods");
        },
        multiple() {
            this.multiple = this.astrictNumber("multiple");
        }
    },
    computed: {
        btnDisabled() {
            // let ifStorage = await this.cacheMark(true); //缓存
            if (this.markList.length > 0 && this.checked === true) {
                return false;
            }
            return true;
        },
        ifStatusBarExistForContent() {
            if (weex.config.env.platform === "iOS") {
                return {
                    top: "124px"
                };
            } else {
                return {
                    top: "84px"
                };
            }
        },
        ifStatusBarExist() {
            if (weex.config.env.platform === "iOS") {
                return true;
            } else {
                return false;
            }
        },
        totalPram() {
            if (this.markList.length <= 0 || !Array.isArray(this.markList)) {
                return {
                    number: 0,
                    money: 0
                };
            }
            let param = {
                number: 0,
                money: 0
            };
            this.markList.forEach((item, index, arr) => {
                param["number"] += Number(item["number"]);
                param["money"] += Number(item["money"]);
            });
            return {
                // number: param.number * this.periods * this.multiple ,
                // * this.periods,
                number: param.number,
                money: param.money *
                    this.periods *
                    this.multiple *
                    (!!this.checked1 ? 1.5 : 1)
            };
        }
    },
    methods: {
        showPop() {
			this.show = true;
		},

		wxcMaskSetHidden() {
			this.show = false;
		},

        numberTypeSwitch(type) {
            switch (type) {
                case "6":
                    return "胆拖";
                case "7":
                    return "复式";
                case "8":
                    return "单式";
                default:
                    return "未知类型";
            }
        },
        onClickLeftc() {
            return new Promise((resolve, reject) => {
                modal.confirm({
                        message: "退出将清空所选投注号码",
                        okTitle: "确定",
                        cancelTitle: "取消",
                        duration: 0.3
                    },
                    function (value) {
                        resolve(value);
                    }
                );
            });
        },
        addListtener() {},
        // 返回选号操作
        async goSelectMark() {
            navigator.pop();
           
        },
        goBack() {
            navigator.pop();
        },
        // 跳转支付
        async payMent(clickType) {
            // this.loadingshow = true;
            let ifStorage = await this.cacheMark(true); //缓存
            let ifZhuihao;
            if (this.periods > 1) {
                ifZhuihao = 1;
            } else {
                ifZhuihao = 0;
            }
            let ifZhuijia;
            if (this.checked1 === true) {
                ifZhuijia = 1;
            } else {
                ifZhuijia = 0;
            }
            if (
                ifStorage === true &&
                this.markList.length > 0 &&
                this.checked === true
            ) {
                //存完了，列表 有数据，阅读并同意了
                this.reqMarklist = JSON.stringify(this.markList);
                this.reqMarklist = JSON.parse(this.reqMarklist);
                for (let i = 0; i < this.reqMarklist.length; i++) {
                    let red_s = [];
                    let blue_s = [];
                    let red = this.reqMarklist[i].redBall.map(x => {
                        return this.formatNum(x);
                    });
                    if (this.reqMarklist[i].danRedBall) {
                        red_s = this.reqMarklist[i].danRedBall.map(x => {
                            return this.formatNum(x);
                        });
                    }
                    let blue = this.reqMarklist[i].blueBall.map(x => {
                        return this.formatNum(x);
                    });
                    if (this.reqMarklist[i].danRedBall) {
                        blue_s = this.reqMarklist[i].danBlueBall.map(x => {
                            return this.formatNum(x);
                        });
                    }
                    this.reqMarklist[i].redBall = red;
                    this.reqMarklist[i].danRedBall = red_s;
                    this.reqMarklist[i].blueBall = blue;
                    this.reqMarklist[i].danBlueBall = blue_s;
                    this.reqMarklist[i].money = Number(this.markList[i].money);
                    this.reqMarklist[i].number = Number(this.markList[i].number);
                    this.reqMarklist[i].numberType = this.markList[i].numberType;
                }
            } else {
                // this.loadingshow = false;
                modal.alert({
                    message: "未满足条件",
                    okTitle: "确定"
                });
                return;
            }
            let lottoId = this.lottoType === "super-lotto" ? 2 : 1;
            let lottoname = this.lottoType === "super-lotto" ? "大乐透" : "双色球";

            let reqBody = {
                lotteryNo: recentBuyGroup[String(lottoId) - 1].typeName,
                // lotteryId: lottoId, //
                buyTogether: 0, //是否合买
                schemeNumberUnit: this.totalPram.number.toString(), //注数
                issueSum: this.periods, //总共期数
                // issueId: this.issueId, //奖期id
                issueIssue: this.issue, //奖期
                multiple: this.multiple, //倍数
                money: this.totalPram.money.toString(), //方案金额
                buyMoney: "0", //认购金额
                betContent: JSON.stringify(this.reqMarklist), //投注内容
                isChase: ifZhuihao, //是否追号 0不追 1追号
                append: ifZhuijia, //是否追加 0否 1追加(大乐透)
                lotteryLimit:this.lotteryLimit
            };


            
            if (clickType === "chip") {
                let baseurl = getBaseUrl(weex.config.bundleUrl, true);
                let jUrl = baseurl + `views/guess/chipStart.js?` + serialize(reqBody);
                var params = {
                    url: jUrl,
                    animated: "true"
                };
                // this.loadingshow = false;
                navigator.push(params);
                return;
            }

            
            let hash = Object.assign(reqBody, {
                totalmoney: this.totalPram.money,
                // lottotype: awardName[this.postParam['lotteryId']] + this.postParam.issueIssue + "期",
                lottotype: lottoname + this.issue + "期",
                // lottoId: this.postParam['lotteryId']
                lottoId:lottoId.toString()
            })
            
            let baseurl = getBaseUrl(weex.config.bundleUrl, true);

            navigator.push({
				url:baseurl + `views/pay/pay.js?`+ serialize(hash),
				animated: "true"
            })
            
            // try {
                //  return modal.alert({message:JSON.stringify(reqBody)});
                // let req = await postResponsesToken('order/bet/bet', reqBody);

                // let orderid = req.data;
                // this.loadingshow = false;
                // let baseurl = getBaseUrl(weex.config.bundleUrl, true);

                // let hash = {
                //     order: orderid,
                //     totalmoney: this.totalPram.money,
                //     lottotype: lottoname + this.issue + "期",
                //     lottoId: lottoId.toString()
                // };


                // let jUrl = baseurl + `views/pay/pay.js?` + serialize(hash);
                // var params = {
                //     url: jUrl,
                //     animated: "true"
                // };
                // navigator.push(params);
            // } catch (e) {
            //     this.loadingshow = false;
            //     console.log(e);
            //     modal.toast({
            //         message: e
            //     });
            // }
        },

        
        getStorage(name) {
            //获取name的缓存信息
            return new Promise((resolve, rejects) => {
                storage.getItem(name, event => {
                    // if (event.result === "success") {
                    resolve(event);
                    // } else {
                    //   rejects(0);
                    // }
                });
            });
        },
        formatNum(num) {
            if (num < 10) return "0" + num;
            return num.toString();
        },
        afterVoting(param) {
            this[param] = !this[param];
        },
        // 修改期数倍数的条件限制
        changeFn(param) {
            this[param] = this.astrictNumber(param);
        },
        // 限制倍数和期数值
        astrictNumber(param) {
            if (this[param] <= 1) {
                this[param] = 1;
            }
            if (this[param] >= 100) {
                this[param] = 100;
            }
            return this[param];
        },
        // 分解基本选号参数
        basisMark(data, type) {
            return {
                redBall: data.forward,
                blueBall: data.backward,
                type: !!type ? "multiple" : "basisM",
                numberType: data.numberType,
                money: 2,
                number: 1
            };
        },
        // 多选
        multipleMark(data) {
            return data.map(item => {
                return this.basisMark(item, true);
            });
        },
        // 复试选号
        recurrentMark(data, money, number) {
            return {
                redBall: data.forward
                    .concat(data.forward_s)
                    .sort((a, b) => (a < b ? -1 : 1)),
                blueBall: data.backward
                    .concat(data.backward_s)
                    .sort((a, b) => (a < b ? -1 : 1)),
                danRedBall: data.forward_s.sort((a, b) => (a < b ? -1 : 1)),
                danBlueBall: data.backward_s.sort((a, b) => (a < b ? -1 : 1)),
                type: "recurren",
                numberType: data.numberType,
                money: money,
                number: number
            };
        },
        //获取机选5住
        async randowfive() {
            let iarr = [];
            for (let i = 0; i < 5; i++) {
                iarr.push(this.getRandowMark());
            }
            this.markList = this.markList.concat(iarr);
            let setitem = await this.cacheMark(true);
        },
        //获取机选一注大乐透
        getRandowMark() {
            let ballArea = [{
                    name: "super-lotto",
                    area: [1, 35, 5, 1, 12, 2]
                },
                {
                    name: "union-lotto",
                    area: [1, 33, 6, 1, 16, 1]
                }
            ];
            let finalBall = ballArea.filter(x => x.name === this.lottoType);
            // let finalBall = ballArea.filter(x => x.name === "super-lotto");
            let forward = {};
            let backward = {};
            return this.basisMark({
                    forward: this.createRandowArr(
                        finalBall[0].area[0],
                        finalBall[0].area[1],
                        finalBall[0].area[2]
                    ),
                    backward: this.createRandowArr(
                        finalBall[0].area[3],
                        finalBall[0].area[4],
                        finalBall[0].area[5]
                    ),
                    type: "recurren",
                    numberType: "8",
                    money: 2,
                    number: 1
                },
                "multiple"
            );
        },
        // 删除指定的一注大乐透
        async deleteMarkList(index) {
            this.markList.splice(index, 1);
            let setitem = await this.cacheMark(true);
        },
        // 随机数
        createRandowArr(min, max, length) {
            let r = [],
                o = {},
                a;
            for (var i = 0; i < length; i++) {
                a = Math.floor(min + max * Math.random());
                o[a] ? i-- : (r.push(a), (o[a] = true));
            }
            return r.sort((a, b) => (a < b ? -1 : 1));
        },
        calcalate(type, parm) {
            this[parm] = type === "left" ? --this[parm] : ++this[parm];
        },
        //缓存数据
        cacheMark(state) {
            return new Promise((resolve, rejects) => {
                // if (!state) {
                //   if (this.markList == "" || this.markList == null) {
                //     resolve(true);
                //     return;
                //   }
                // }
                storage.setItem("markList", JSON.stringify(this.markList), event => {
                    if (event.result === "success") {
                        resolve(true);
                    } else {
                        rejects("缓存数据失败");
                    }
                });
            });
        },
        // 获取缓存数据
        getCacheMark() {
            return new Promise((resolve, rejects) => {
                storage.getItem("markList", event => {
                    resolve(event);
                });
            });
        },
        // 删除缓存
        removeCacheMark() {
            return new Promise((resolve, rejects) => {
                this.getMarkAllKeys().then(value => {
                    if (value.indexOf("markList") === -1) {
                        resolve(true);
                        return false;
                    } else {
                        storage.removeItem("markList", event => {
                            if (event.result === "success") {
                                resolve("删除成功");
                            } else {
                                rejects("删除缓存数据失败!");
                            }
                        });
                    }
                });
            });
        },
        // 获取缓存所有的键
        getMarkAllKeys() {
            return new Promise((resolve, rejects) => {
                storage.getAllKeys(event => {
                    if (event.result === "success") {
                        resolve(event.data);
                    } else {
                        rejects("获取缓存key失败!");
                    }
                });
            });
        },
        async getUrlParam() {
            var url = decodeURI(weex.config.bundleUrl); //取得整个地址栏
            let query1 = jsonAnalysis(url.split("?")[1]);
            this.issueId = query1.issueId;
            this.issue = query1.issue;
            this.from = query1.from;
            this.lottoType = query1.lottoType;
            let data = JSON.parse(query1.data);
            let money = query1.money;
            let number = query1.zhushu;

            this.lotteryLimit = query1.lotteryLimit

            if (this.from === "home") {
                // 获取首页快速号码
                // 从首页进来删除数据
                this.removeCacheMark().then(value => {
                    this.markList = [];
                    this.markList = this.markList.concat(this.basisMark(data, true));
                });
                let setitem = await this.cacheMark(true);
                // modal.toast({message:JSON.stringify(setitem)})
            } else {
                //彩种页面进入
                // 是否机选 依靠数据判断
                this.markList = this.markList.concat(
                    !!Array.isArray(data) ?
                    this.multipleMark(data) :
                    this.recurrentMark(data, money, number)
                );
                let getstora = await this.getCacheMark();
                if (getstora.data !== "undefined") {
                    this.markList = this.markList.concat(JSON.parse(getstora.data));
                }
                let setitem = await this.cacheMark(true);
            }
        }
    },
    created() {
        const tabPageHeight = Utils.env.getPageHeight();
        this.contentStyle = {
            height: tabPageHeight - 560 + "px"
        };
    },
    destroyed() {
        // sxglobalEvent.removeEventListener("androidback");
    },
    mounted() {
        this.getUrlParam();
        this.addListtener();
    }
};
</script>

<style>
.scroller-xieyi{
	height:700px;
}
.header-all {
  flex: 1;
  height: 90px;
  display: flex;
  align-items: center;
  align-items: flex-start;
  justify-content: center;
}
.batconfirm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(245, 245, 245);
}
.fixedbottom {
  position: absolute;
  bottom: 0;
  width: 750px;
  height: 100px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.middlecontent {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  bottom: 100px;
  width: 750px;
  background-color: rgb(245, 245, 245);
}
.fixedbottom_fl {
  margin-left: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}
.fixedbottom_rg {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  flex: 1;
}
.buttons {
  background-color: #e70d0d;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option {
  display: flex;
  margin-top: 32px;
  flex-direction: row;
  justify-content: space-between;
}
.option_fl {
  margin-left: 32px;
  width: 320px;
  height: 74px;
  background-color: #ffffff;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.option_fr {
  margin-right: 32px;
  width: 320px;
  height: 74px;
  background-color: #ffffff;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.batlist {
  margin-top: 32px;
  display: flex;
  align-items: center; 
}
.dannumberred {
  font-size: 20px;
  color: red;
}
.dannumberblue {
  font-size: 20px;
  color: blue;
}
.batlist_item {
  display: flex;
  padding-top: 32px;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #e1e1e1;
  padding-bottom: 24px;
  align-items: center;
}
.numberlist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 520px; 
}
.batlist_item_desc {
  margin-left: 12px;
  display: flex;
  flex-direction: row;
}
.numberdetail {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: red;
}
.dannumber {
  position: absolute;
  top: 0;
  right: 0px;
}
.red {
  background-color: red;
}
.bluess {
  background-color: blue;
}
.batlist_item_icon {
  display: flex;
  justify-content: center;
  margin-left: 28px;
  margin-right: 38px;
}
.batlist_item_icon_delete {
  width: 40px;
  height: 40px;
}
.stepoption {
  width: 750px;
  left: 0;
  height: 73px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.stepoption_fl {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
  height: 73px;
}
.stepoption_rg {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 32px;
}
.protocol {
  width: 750px;
  height: 40px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}
.protocol_fl {
  margin-left: 32px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.weex-elstepper-input {
  background-color: white;
}
.header {
  width: 750px;
  height: 90px;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  font-family: PingFangSC-Medium;
}
.header-font-title {
  height: 90px;
  flex: 1; 

  display: flex;
  align-items: center;
  justify-content: center;
}
.header-font-pr {
  font-size: 28px;
  color: #2B3940;
}
.flex {
  display: flex;
}
.header-con {
  flex: 1;
  display: flex;
  align-items: center;
}
.batlist-line {
  width: 710px;
  height: 12px;
  background-color: #c7c7c7;
  border-radius: 6px;
  position: absolute;
  left: 20px;
  top: 0px;
  z-index: 1;
}
.scroller-box {
  position: relative;
  left: 0;
  top: 7px;
  z-index: 3;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #c3b1b1;
  margin-bottom: 30px;
}

.scroller {
  width: 686px;
  height: 590px;
  background-color: #fff;
}

.option-icon-btn {
  width: 28px;
  height: 28px;
  margin-right: 16px;
}
.option-text-btn {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}
.white-color {
  color: #fff;
  font-size: 28px;
}
.stepoption-minus {
  width: 70px;
  height: 74px;
  background-color: #f8f8f8;
  border-width: 1px;
  border-style: solid;
  border-color: #d5d5d5;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
}
.stepper-plus {
  width: 70px;
  height: 74px;
  background-color: #f8f8f8;
  border-width: 1px;
  border-style: solid;
  border-color: #d5d5d5;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
}
.stepoption-input {
  width: 106px;
  height: 74px;
  line-height: 74px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-style: solid;
  border-color: #d5d5d5;
  text-align: center;
}
.stepoption-ct {
  width: 247px;
  height: 78px;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.gray-font {
  color: #333;
  font-size: 24px;
}
.parint {
  width: 70px;
  height: 70px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.batlist-gear {
  width: 686px;
  height: 24px;
  position: relative;
  bottom: 0;
  left: 0;
}
.goucai-wrap{
	
	padding-left:30px;
	padding-right:30px;

}
 .goucai-item{
      
        font-size: 24px;
        color: #333333;
       
        padding-top:24px;
        /* width:675px; */
      
    }
    .goucai-text{
    
        padding-top:14px;
    }
    .item-bot{
        padding-bottom:24px;
    }
</style>
